Marko: Deklaratiivinen UI Streaming Server-Side Renderingilla

Nykyajan nopeatempoisessa digitaalisessa maisemassa verkkosivustojen suorituskyky on ensisijaisen tärkeää. Hitaasti latautuva tai reagoimaton verkkosivusto voi johtaa turhautuneisiin käyttäjiin, korkeampiin poistumisprosentteihin ja lopulta menetettyyn tuloon. Marko, deklaratiivinen UI-kehys, vastaa näihin huolenaiheisiin tarjoamalla ainutlaatuisen lähestymistavan suorituskykyisten web-sovellusten rakentamiseen. Tämä artikkeli perehtyy Markon ydinominaisuuksiin, erityisesti sen streaming server-side rendering (SSR) -ominaisuuksiin, ja selittää, miksi se on vakuuttava valinta kehittäjille, jotka rakentavat verkkosivuja ja web-sovelluksia globaalille yleisölle.

Mikä on Marko?

Marko on eBayn luoma ja nyt Marko-tiimin ylläpitämä avoimen lähdekoodin UI-kehys. Se erottuu muista kehyksistä keskittymällä suorituskykyyn, yksinkertaisuuteen ja skaalautuvuuteen. Toisin kuin jotkut kehykset, jotka priorisoivat asiakaspuolen renderöintiä, Marko korostaa palvelinpuolen renderöintiä, erityisesti streaming SSR:ää. Tämä tarkoittaa, että palvelin esirenderoi sovelluksesi HTML:n ja lähettää sen selaimelle osissa (streameina) sitä mukaa kun se tulee saataville, mikä johtaa nopeampaan First Contentful Paint (FCP) -näyttöön ja parempaan käyttökokemukseen.

Markon keskeiset ominaisuudet ja hyödyt

• Deklaratiivinen syntaksi: Marko käyttää HTML:ää muistuttavaa deklaratiivista syntaksia, mikä tekee sen oppimisesta ja käytöstä helppoa. Tämä yksinkertaisuus vähentää kehittäjien oppimiskäyrää ja antaa heidän keskittyä ominaisuuksien rakentamiseen sen sijaan, että he joutuisivat kamppailemaan monimutkaisten kehyskonseptien kanssa.
• Streaming Server-Side Rendering (SSR): Tämä on luultavasti Markon tehokkain ominaisuus. Streaming SSR mahdollistaa palvelimen lähettää HTML:n selaimelle asteittain heti kun se on valmis, sen sijaan että odotettaisiin koko sivun renderöimistä. Tämä parantaa merkittävästi verkkosivuston havaittua suorituskykyä, erityisesti käyttäjille, joilla on hitaammat internetyhteydet tai jotka käyttävät sivustoa maantieteellisesti etäältä. Kuvittele käyttäjä maaseudulla Intiassa, joka käyttää Markon streaming SSR:llä rakennettua verkkosivustoa. He alkaisivat nähdä sisältöä paljon nopeammin verrattuna verkkosivustoon, joka luottaa yksinomaan asiakaspuolen renderöintiin, jonka on ladattava kaikki JavaScript ennen minkään näyttämistä.
• Automaattinen koodin jakaminen: Marko jakaa automaattisesti JavaScript-koodisi pienempiin osiin ja lataa ne tarvittaessa, mikä minimoi alustavan latauskokoon ja parantaa sivujen latausaikoja. Tämä on ratkaisevan tärkeää mobiilikäyttäjille ja niille, joilla on rajallinen kaistanleveys.
• Komponenttipohjainen arkkitehtuuri: Marko edistää komponenttipohjaista arkkitehtuuria, jonka avulla voit jakaa sovelluksesi uudelleenkäytettäviin, hallittaviin osiin. Tämä parantaa koodin organisointia, ylläpidettävyyttä ja testattavuutta.
• HTML:n kaltainen syntaksi laajennuksilla: Markon syntaksi laajentaa HTML:ää ominaisuuksilla, kuten komponenteilla, silmukoilla ja ehdollisella renderöinnillä, mikä tekee siitä intuitiivisen kehittäjille, jotka tuntevat HTML:n. Esimerkiksi voit helposti luoda uudelleenkäytettävän painikekomponentin ja käyttää sitä koko sovelluksessasi.
• Optimoitu hakukoneoptimointia varten (SEO): Palvelinpuolen renderöinti tekee verkkosivustostasi helpommin hakukoneiden bottien indeksoitavissa, mikä parantaa hakukonesijoitustasi. Tämä on merkittävä etu yrityksille, jotka haluavat houkutella orgaanista liikennettä verkkosivuilleen.
• Pieni paketin koko: Markolla on suhteellisen pieni ajonaikainen koko verrattuna muihin suosittuihin kehyksiin, mikä edistää entisestään nopeampia latausaikoja.
• Progressiivinen parannus: Marko kannustaa progressiiviseen parannukseen, jonka avulla verkkosivustosi voi toimia, vaikka JavaScript olisi poissa käytöstä tai ei latautuisi. Tämä takaa paremman käyttökokemuksen kaikille vierailijoille riippumatta heidän selaimen ominaisuuksista.
• Sisäänrakennetut optimoinnit: Marko sisältää erilaisia sisäänrakennettuja optimointeja, kuten mallineiden välimuistiin tallentamisen ja DOM-erottelun, jotka parantavat suorituskykyä entisestään.
• Helppo integrointi: Marko on helppo integroida olemassa oleviin Node.js-taustaosiin ja muihin front-end-työkaluihin.

Syvemmälle Streaming Server-Side Renderingiin

Tutkitaanpa streaming SSR:n etuja tarkemmin:

Parempi First Contentful Paint (FCP)

FCP on keskeinen mittari verkkosivuston suorituskyvyn mittaamisessa. Se edustaa aikaa, joka kuluu ensimmäisen sisällön (teksti, kuva jne.) ilmestymiseen näytölle. Streaming SSR vähentää merkittävästi FCP:tä, koska selain alkaa vastaanottaa ja renderöidä HTML:ää paljon aikaisemmin kuin asiakaspuolen renderöinnissä. Sen sijaan että odotettaisiin koko JavaScript-paketin lataamista ja suorittamista, selain voi välittömästi alkaa näyttää sivun alkuperäisen sisällön. Kuvittele verkkokauppasivustoa, joka esittelee tuoteluetteloita. Streaming SSR:n avulla käyttäjä näkee tuotekuvat ja kuvaukset melkein välittömästi, jo ennen kuin interaktiiviset elementit ovat täysin ladattuja. Tämä luo paljon kiinnostavampaa ja reagoivampaa käyttökokemusta.

Parempi käyttökokemus

Nopeampi FCP tarkoittaa parempaa käyttökokemusta. Käyttäjät eivät niin todennäköisesti hylkää verkkosivustoa, jos he näkevät sisällön nopeasti. Streaming SSR tarjoaa sujuvamman ja reagoivamman kokemuksen, erityisesti hitaammissa verkoissa tai laitteissa. Tämä on erityisen tärkeää mobiilikäyttäjille kehitysmaissa, joissa Internet-yhteydet voivat olla epäluotettavia. Esimerkiksi uutissivusto, joka käyttää streaming SSR:ää, voi toimittaa uutisotsikot ja -yhteenvedot välittömästi, jopa käyttäjille, joilla on rajallinen kaistanleveys.

SEO-hyödyt

Hakukoneiden botit luottavat HTML-sisältöön ymmärtääkseen verkkosivuston rakenteen ja sisällön. Palvelinpuolen renderöinti tarjoaa helposti saatavilla olevaa HTML:ää, mikä helpottaa hakukoneiden indeksointia ja sivustosi indeksointia. Tämä parantaa hakukonesijoitustasi ja lisää orgaanista liikennettä. Vaikka Google on parantanut JavaScriptin renderöintiä, SSR tarjoaa silti merkittävän edun, erityisesti verkkosivustoille, joilla on monimutkaisia JavaScript-pohjaisia sovelluksia. Matkatoimistojen verkkosivusto, joka käyttää SSR:ää, saa kohdesivunsa oikein indeksoituina, mikä varmistaa, että ne näkyvät asiaankuuluvissa hakutuloksissa.

Parannettu saavutettavuus

SSR edistää parempaa saavutettavuutta tarjoamalla HTML-sisältöä, jonka ruudunlukijat ja muut apuvälineet voivat helposti jäsentää. Tämä varmistaa, että verkkosivustoasi voivat käyttää myös vammaiset henkilöt. Renderoimalla alkuperäisen sisällön palvelimella tarjoat vankan perustan saavutettavuudelle jo ennen kuin JavaScript on täysin ladattu. Esimerkiksi hallituksen verkkosivusto, joka käyttää SSR:ää, varmistaa, että kaikki kansalaiset, riippumatta heidän kyvyistään, pääsevät käsiksi tärkeisiin tietoihin.

Marko vs. muut kehykset

Miten Marko pärjää muihin suosittuihin UI-kehyksiin, kuten React, Vue ja Angular?

Marko vs. React

React on laajalti käytetty kirjasto käyttöliittymien rakentamiseen. Vaikka Reactia voidaan käyttää palvelinpuolen renderöinnissä (käyttämällä Next.js:ää tai vastaavia kehyksiä), se luottaa yleensä asiakaspuolen renderöintiin oletuksena. Markon streaming SSR tarjoaa suorituskykyedun Reactin perinteiseen SSR-lähestymistapaan verrattuna. Reactin ekosysteemi on laaja ja tarjoaa monia kirjastoja ja työkaluja, mutta tämä voi myös johtaa monimutkaisuuteen. Marko keskittyy yksinkertaisuuteen ja suorituskykyyn ja tarjoaa virtaviivaisemman kehityskokemuksen. Harkitse monimutkaista kojelautasovellusta. Vaikka React tarjoaa komponenttipohjaisen lähestymistavan, Markon streaming SSR saattaa tarjota suorituskykyä parantavan alkuperäisen sivun latauksessa, varsinkin suurten tietojoukkojen näyttämisessä.

Marko vs. Vue

Vue on toinen suosittu kehys, joka tunnetaan helppokäyttöisyydestään ja progressiivisesta lähestymistavasta. Vue tukee myös palvelinpuolen renderöintiä (käyttämällä Nuxt.js:ää). Markolla ja Vuelle on joitain yhtäläisyyksiä yksinkertaisuuden ja komponenttipohjaisen arkkitehtuurin suhteen. Kuitenkin Markon streaming SSR tarjoaa selkeän suorituskykyedun, erityisesti verkkosivustoille, joilla on paljon liikennettä tai monimutkaisia UI:ta. Vue vaatii usein enemmän manuaalista optimointia palvelinpuolen renderöintiin optimaalisen suorituskyvyn saavuttamiseksi. Esimerkiksi sosiaalisen median verkkosivusto saattaisi hyötyä Markon streaming SSR:stä näyttääkseen nopeasti käyttäjän syötteet ja päivitykset.

Marko vs. Angular

Angular on täysimittainen kehys, joka tarjoaa kattavan ratkaisun monimutkaisten web-sovellusten rakentamiseen. Angular tukee palvelinpuolen renderöintiä Angular Universalin kautta. Kuitenkin Angular voi olla monimutkaisempi oppia ja käyttää verrattuna Markoon ja Vueen. Markon yksinkertaisuus ja suorituskykyyn keskittyminen tekevät siitä vakuuttavan vaihtoehdon projekteille, joissa suorituskyky on tärkein prioriteetti. Suuri yrityssovellus saattaa valita Angularin sen vankkojen ominaisuuksien ja skaalautuvuuden vuoksi, mutta pienempi startup saattaa valita Markon nopeuden ja helppokäyttöisyyden.

Yhteenvetona: Vaikka React, Vue ja Angular tukevat kaikki palvelinpuolen renderöintiä, Markon sisäänrakennettu streaming SSR tarjoaa merkittävän suorituskykyedun. Marko priorisoi suorituskykyä ja yksinkertaisuutta, mikä tekee siitä erinomaisen valinnan projekteille, joissa nämä tekijät ovat kriittisiä.

Markon käytön aloittaminen

Markon käytön aloittaminen on suhteellisen yksinkertaista. Tässä on perusluonnos:

1. Asenna Node.js: Varmista, että sinulla on Node.js asennettuna järjestelmään.
2. Asenna Marko CLI: Suorita `npm install -g marko-cli` asentaaksesi Marko-komentorajapinnan globaalisti.
3. Luo uusi Marko-projekti: Käytä komentoa `marko create my-project` luodaksesi uuden Marko-projektin.
4. Tutki projektirakennetta: Projekti sisältää tiedostoja, kuten `index.marko` (pääkomponenttisi), `server.js` (palvelinpuolen sisääntulopisteesi) ja `marko.json` (projektin määritys).
5. Suorita kehityspalvelin: Käytä komentoa `npm start` käynnistääksesi kehityspalvelimen.
6. Aloita komponenttiesi rakentaminen: Luo uusia `.marko`-tiedostoja komponenteillesi ja tuo ne pääkomponenttiisi.

Esimerkki Marko-komponentista (index.marko):

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</p>
</body>
</html>

            

              
                Copy
              
            
          

Esimerkki palvelinpuolen renderöinnistä (server.js):

            
require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

            

              
                Copy
              
            
          

Nämä ovat vain perusesimerkkejä pääsemiseksi alkuun. Marko tarjoaa runsaasti ominaisuuksia ja vaihtoehtoja monimutkaisten web-sovellusten rakentamiseen. Katso virallisesta Marko-dokumentaatiosta tarkempia tietoja.

Todellisia esimerkkejä Markosta toiminnassa

Vaikka eBay kehitti alun perin Markon, sitä käyttävät nyt monet yritykset eri toimialoilla:

• eBay: eBay käyttää Markoa laajalti ydinalustassaan, mikä osoittaa sen kykyä käsitellä paljon liikennettä ja monimutkaisia UI:ta.
• Lazada (Kaakkois-Aasia): Suuri verkkokauppayritys Kaakkois-Aasiassa (Alibaban omistuksessa) käyttää Markoa parantaakseen suorituskykyä ja tarjotakseen paremman ostokokemuksen käyttäjilleen eri maissa, joissa Internet-nopeudet vaihtelevat.
• Lukuisat startupit ja yritykset: Monet muut yritykset ottavat Markoa käyttöön sen suorituskykyhyötyjen ja helppokäyttöisyyden vuoksi.

Nämä esimerkit osoittavat Markon monipuolisuuden ja sopivuuden monenlaisiin web-sovelluksiin.

Parhaat käytännöt Markon käytössä

Saat Markosta parhaan hyödyn irti ottamalla huomioon nämä parhaat käytännöt:

• Hyödynnä streaming SSR:ää: Hyödynnä täysin Markon streaming SSR -ominaisuuksia parantaaksesi FCP:tä ja käyttökokemusta.
• Optimoi komponenttisi: Optimoi Marko-komponenttisi suorituskykyä varten minimoimalla DOM-päivitykset ja välttämällä tarpeettomat uudelleen renderöinnit.
• Käytä koodin jakamista: Hyödynnä Markon automaattista koodin jakamista vähentääksesi JavaScript-koodisi alustavaa latauskokoa.
• Harkitse saavutettavuutta: Varmista, että verkkosivustosi on saavutettava noudattamalla saavutettavuusohjeita ja käyttämällä semanttista HTML:ää.
• Testaa sovelluksesi perusteellisesti: Testaa sovelluksesi eri laitteilla ja selaimilla varmistaaksesi johdonmukaisen ja luotettavan käyttökokemuksen.

Johtopäätös: Marko – Tehokas valinta moderniin web-kehitykseen

Marko on tehokas ja monipuolinen UI-kehys, joka tarjoaa vakuuttavan ratkaisun suorituskykyisten web-sovellusten rakentamiseen. Sen deklaratiivinen syntaksi, streaming SSR -ominaisuudet ja keskittyminen yksinkertaisuuteen tekevät siitä erinomaisen valinnan kehittäjille, jotka haluavat parantaa verkkosivustojen suorituskykyä, parantaa käyttökokemusta ja tehostaa SEO:ta. Ottamalla Markon käyttöön kehittäjät voivat luoda verkkosivustoja ja web-sovelluksia, jotka ovat nopeita, reagoivia ja kaikkien käyttäjien saatavilla ympäri maailmaa. Olitpa sitten rakentamassa pientä henkilökohtaista verkkosivustoa tai suurta yrityssovellusta, Marko on harkitsemisen arvoinen UI-kehysvalintasi. Sen painotus sisällön nopeaan ja tehokkaaseen toimittamiseen tekee siitä erityisen merkityksellisen nykypäivän globalisoituneessa ja suorituskykyyn suuntautuneessa digitaalisessa maisemassa.

Lisäresurssit:

• Virallinen Marko-verkkosivusto
• Markon GitHub-arkisto
• Markon dokumentaatio